{% extends "my_groups/shared.html" %}

{% block title %}
Edit group
{% endblock %}

{% block content %}
	{% if not hasToAdd and not hasToRemove %}
	<h2>You have no friends to add to the group.</h2>
	{% endif %}
	{% if hasToRemove %}
	<h2>Members of group '{{ group }}':</h2>
	<div class="paragraph">
	<form id="removefriendsbuttton" action="/groups/editfriends/" method="post">
		{% for u in fgroups %}
		<input type="checkbox" name="friends"  value="{{ u }}" id="{{ u }}" />
		<label for="{{ u }}" >{{ u }}</label>
		<br />
		{% endfor %}
		<br />
		<input name="groupname" type="hidden" id="removeGroupname" value="{{ group }}" />
		<input name="action" type="hidden" id="removeAction" value="removeFriend" />
		<input type="image" src ="{{ STATIC_URL }}images/buttons/remove.png" value="Remove selected from friends" />
		<div class="helpSheet">
			Select the members of the group you want to remove and click the 'Remove' button.
		</div>
	</form>
	</div>
	{% endif %}
	{% if hasToAdd %}
	<br />
	<div class="paragraph">
		<form id="addfriendsbuttton" action="/groups/editfriends/" method="post">
			{% for u in fngroups %}
			<input type="checkbox" name="friends" value="{{ u }}" id="{{ u }}" />
			<label for="{{ u }}" >{{ u }}</label>
			<br />
			{% endfor %}
			<br />
			<input name="action" type="hidden" id="addAction" value="addFriend" />
			<input name="groupname" type="hidden" id="addGroupname" value="{{ group }}" />
		   	<input type="image" src ="{{ STATIC_URL }}images/buttons/add.png" value="Add more friends" />
	   </form>
	   <div class="helpSheet">
	   		Select the people you want to be in the group, and press the 'Add' button to confirm.
	   </div>
	 </div>
	{% endif %}
	<form id="removegroup" action="/groups/remove/" method="post">
			<br />
			<input name="groupname" type="hidden" id="groupName" value="{{ group }}" />
		   	<input type="image" src ="{{ STATIC_URL }}images/buttons/removeGroup.png" value="removeGroup" />
	   </form>
	<div class="helpSheet">
		Click the 'Remove Group' button to completely remove the group.
	</div>
	
{% endblock %}
